<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <cpn2></cpn2>
        <cpn1></cpn1>
    </div>
    <script src='../js/vue.js'></script>
    <script>
        //1.创建第一个组件构造器(子组件)
        const cpnC1 = Vue.extend({
            template: `
                <div>
                    <h2>我是标题1</h2>
                    <span>我是span</span>
                </div>
            `
        })

        //1.创建第二个组件构造器(父组件)
        const cpnC2 = Vue.extend({
            template: `
                <div>
                    <h2>我是标题2</h2>
                    <span>我是span的父亲</span>
                    <cpn1></cpn1>
                </div>
            `,
            components:{
               cpn1:cpnC1
            }
        })
        
        //root组件
        const app = new Vue({
            el: '#app',
            components: {
                cpn2: cpnC2,
                cpn1:cpnC1
            }
        })
    </script>
</body>

</html>